<template>
  <footer class="footer" v-show="list.length">
    <span class="todo-count"
      ><strong>{{ sum }}</strong
      >剩余</span
    >
    <ul class="filters">
      <li>
        <a class="selected" href="#/" @click="alls">全部</a>
      </li>
      <li>
        <a href="#/active" @click="active">进行中</a>
      </li>
      <li>
        <a href="#/completed" @click="all">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="fn" v-show="sum!==list.length">清除已完成</button>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      flag:this.list.length===0? false:true,
      a: 0,
    }
    
  },
  props: {
    list: {
      type: Array,
    },
  },
  computed: {
    sum() {
      let a = 0
      this.list.forEach((x) => {
        if (!x.isDone) {
          a++
        }
      })
      console.log(this.flag);
      return a

    },
  
    
  },
  methods: {
    fn() {
     this.$emit('dell')
    },
    all() {
      this.list.filter(x => {
        x.show = x.isDone
      })


    },
    alls() {
      this.list.forEach(x => {
      x.show = true
    })
    },
    active() {
      this.list.filter(x => {
       x.show = !x.isDone
    })
  }
  },
  
}

</script>

<style></style>
